<template>
  <div class="agent-contact-example">
    <h2>联系经纪人组件示例</h2>
    
    <div class="example-section">
      <h3>1. 按钮模式（默认）</h3>
      <div class="example-item">
        <AgentContact 
          :agentId="1" 
          buttonType="primary"
        />
      </div>
      
      <h3>2. 自定义按钮文字</h3>
      <div class="example-item">
        <AgentContact 
          :agentId="1" 
          buttonType="success"
          buttonSize="large"
        >
          立即联系该经纪人
        </AgentContact>
      </div>
      
      <h3>3. 卡片模式</h3>
      <div class="example-item">
        <AgentContact 
          :agentId="1" 
          mode="card"
          :agentData="{
            name: '李经理',
            title: '高级房产顾问',
            avatar: '/src/assets/images/agents/agent2.jpg',
            phone: '139****7777',
            wechat: 'agent777'
          }"
        />
      </div>
      
      <h3>4. 房源详情页使用（带房源ID）</h3>
      <div class="example-item">
        <AgentContact 
          :agentId="1" 
          :houseId="101"
          buttonType="danger"
        />
      </div>
      
      <h3>5. 不显示预约看房按钮</h3>
      <div class="example-item">
        <AgentContact 
          :agentId="1" 
          mode="card"
          :showAppointment="false"
          :agentData="{
            name: '王经理',
            title: '资深房产顾问',
            avatar: '/src/assets/images/agents/agent3.jpg',
            phone: '137****6666'
          }"
        />
      </div>
    </div>
    
    <div class="integration-examples">
      <h3>如何在现有组件中集成</h3>
      
      <div class="code-example">
        <pre>
// 1. 在经纪人列表页 (index.vue) 替换现有的联系按钮
&lt;el-button type="primary" class="contact-btn" @click="startChat(agent)"&gt;联系经纪人&lt;/el-button&gt;

// 替换为:
&lt;AgentContact :agentId="agent.id" /&gt;

// 2. 在经纪人详情页 (AgentDetail.vue) 替换现有的联系按钮
&lt;el-button 
    type="primary" 
    size="large"
    @click="startChat"
&gt;联系经纪人&lt;/el-button&gt;

// 替换为:
&lt;AgentContact 
    :agentId="agent.id"
    buttonSize="large"
    :agentData="agent"
/&gt;

// 3. 在房源详情页 (HouseDetail.vue) 替换现有的联系按钮
&lt;el-button type="primary" size="large" @click="handleContact"&gt;
    &lt;svg-icon name="house/info/phone" /&gt;
    联系经纪人
&lt;/el-button&gt;

// 替换为:
&lt;AgentContact 
    :agentId="houseDetail.agentId" 
    :houseId="houseDetail.houseId"
    buttonSize="large"
    :agentData="{
        name: houseDetail.agentName,
        title: houseDetail.agentTitle,
        avatar: houseDetail.agentAvatar,
        phone: houseDetail.agentPhone,
        wechat: houseDetail.agentWechat
    }"
/&gt;
        </pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AgentContact from './AgentContact.vue'
</script>

<style lang="scss" scoped>
.agent-contact-example {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  
  h2 {
    margin-bottom: 30px;
    color: #2F3B59;
    font-size: 24px;
  }
  
  h3 {
    margin: 25px 0 15px;
    color: #4A60A1;
    font-size: 18px;
  }
  
  .example-section {
    margin-bottom: 40px;
    
    .example-item {
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }
  
  .integration-examples {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    
    pre {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 6px;
      overflow-x: auto;
      font-family: monospace;
      line-height: 1.5;
    }
  }
}
</style> 